import pDelete from '@/images/common/delete.png';
import pDown from '@/images/common/down-center.png';
import pRightIcon from '@/images/common/rightIn.png';
import pUp from '@/images/common/up-center.png';
import { Image, View } from '@tarojs/components';
import classNames from 'classnames';
import React, { useState } from 'react';
import ProductList from '../ProductList';
import styles from './index.module.scss';

const OrgView = ({ org, onDelete }) => {
  return (
    <View className="disable-org-view">
      <View className="org-header">
        <View className="org-name">
          <View className="title omit">{org?.orgName}</View>
          <Image className="right-icon" src={pRightIcon} />
        </View>
        <View className="label">超出配送范围</View>

        <Image
          className="del-icon"
          src={pDelete}
          onClick={() => {
            onDelete(org?.overDistributionList);
          }}
        />
      </View>

      <ProductList productList={org?.overDistributionList} />
    </View>
  );
};

const OverDistributionArea = ({ orgList, onDelete }) => {
  const [isShow, setIsShow] = useState(false);

  if (!orgList?.length) {
    return null;
  }

  return (
    <View className={styles.OverDistributionArea}>
      <View
        className={classNames('action', { hidden: isShow })}
        onClick={() => {
          setIsShow(true);
        }}
      >
        <View className="txt">查看超出配送范围的店铺</View>
        <Image className="icon" src={pDown}></Image>
      </View>

      <View className={classNames('view-all', { hidden: !isShow })}>
        <View className="header">
          <View className="txt">查看超出配送范围的店铺</View>
        </View>

        {orgList?.map((org) => {
          return <OrgView key={org.orgId} org={org} onDelete={onDelete} />;
        })}

        <View
          className="action"
          onClick={() => {
            setIsShow(false);
          }}
        >
          <View className="txt">收起超出配送范围的店铺</View>
          <Image className="icon" src={pUp}></Image>
        </View>
      </View>
    </View>
  );
};

export default OverDistributionArea;
